<template>
  <div class="product" id="product">
	<div class="productHot">
		<p>
    <img src="http://shangrongfintech.com/static/img/product/xinpin.png" />
    </p>
		<p>
    <img src="http://shangrongfintech.com/static/img/product/xiaoliang.png" />
    </p>
	</div>
	<div class="radio">
		<span class="icon1"></span>
		<p>
      <marquee width="100%"  scrollamount="5"  scrolldelay="300"  direction="left" >
        企业金融融资方案——股权质押，开课时间2017.11.30 20：30
      </marquee>
    </p>
		<span class="icon2"></span>
	</div>
	<div class="productType">
		<div class="productitem">
			<div class="pic">
				<p><img src="http://shangrongfintech.com/static/img/product/guonei.png" /></p>
				<p>国内产品</p>
			</div>
			<div class="text">
				<p class="textContainer">
					<span>国内短期投资优质产品</span>
				</p>
				<p class="label">
					<span class="label1">固收</span>
					<span class="label2">互联网金融</span>
				</p>
			</div>
		</div>
		<div class="productitem">
			<div class="pic">
				<p><img src="http://shangrongfintech.com/static/img/product/xianggang.png" /></p>
				<p>香港保险</p>
			</div>
			<div class="text">
				<p class="textContainer">
					<span>精选香港优质产品</span>
				</p>
				<p class="label">
					<span class="label1">危疾保障</span>
					<span class="label2">人寿保障</span>
				</p>
			</div>
		</div>
		<div class="productitem">
			<div class="pic">
				<p><img src="http://shangrongfintech.com/static/img/product/guoji.png" /></p>
				<p>国际产品</p>
			</div>
			<div class="text">
				<p class="textContainer">
					<span>高端投资首选</span>
				</p>
				<p class="label">
					<span class="label1">环球移民</span>
					<span class="label2">外汇交易</span>
				</p>
			</div>
		</div>
		<div class="productitem">
			<div class="pic">
				<p><img src="http://shangrongfintech.com/static/img/product/qiye.png" /></p>
				<p>企业金融</p>
			</div>
			<div class="text">
				<p class="textContainer">
					<span>企业发展新趋势</span>
				</p>
				<p class="label">
					<span class="label1">OTC上市</span>
					<span class="label2">信用证书</span>
				</p>
			</div>
		</div>
	</div>
</div>
</template>
<script>
</script>
<style scoped>
* {
  color: #333;
  box-sizing: border-box;
}
html {
  background: rgba(242, 242, 242, 1);
}
.productHot > p {
  width: 100;
}
.productHot > p > img {
  width: 100%;
}
.radio {
  background: #fff;
  width: 100%;
  height: 44px;
  position: relative;
  margin-top: 10px;
}
.radio > .icon1 {
  display: block;
  width: 28px;
  height: 28px;
  position: absolute;
  left: 20px;
  top: 50%;
  margin-top: -14px;
  background: url(http://shangrongfintech.com/static/img/product/laba.png)
    no-repeat center center;
  background-size: 60%;
}
.radio > .icon2 {
  display: block;
  width: 10px;
  height: 28px;
  position: absolute;
  right: 20px;
  top: 50%;
  margin-top: -14px;
  background: url(http://shangrongfintech.com/static/img/product/jiantou.png)
    no-repeat center center;
  background-size: 90%;
}
.radio > p {
  width: 60%;
  height: 28px;
  position: absolute;
  left: 70px;
  top: 50%;
  margin-top: -14px;
  font-size: 14px;
  font-family: PingFang-SC-Regular;
  color: rgba(214, 2, 2, 1);
  line-height: 28px;
}
.productitem {
  background: #fff;
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: row;
  margin-top: 10px;
  box-shadow: 1px 1px 6px #bbb;
}
.pic {
  flex: 1;
  max-width: 100px;
  text-align: center;
}
.text {
  flex: 2;
  display: flex;
  flex-direction: column;
}
.label {
  flex: 1;
  padding: 4% 0 0% 5%;
}
.label > .icon {
}
.textContainer {
  flex: 2;
  position: relative;
}
.textContainer > span {
  display: block;
  height: 16px;
  position: absolute;
  top: 50%;
  left: 5%;
  margin-top: -8px;
  font-size: 16px;
  font-weight: 800;
  font-family: "黑体";
  line-height: 21px;
}
.pic > p > img {
  margin-top: 10px;
  width: 50%;
}
.label1 {
  padding: 0 4px;
  text-align: center;
  display: inline-block;
  height: 17px;
  min-width: 55px;
  color: #ff8706;
  border: 1px solid #ff8706;
  border-radius: 3px;
  font-size: 13px;
  line-height: 17px;
}
.label2 {
  padding: 0 4px;
  text-align: center;
  display: inline-block;
  height: 17px;
  min-width: 55px;
  color: #ff8706;
  border: 1px solid #ff8706;
  border-radius: 3px;
  font-size: 13px;
  line-height: 17px;
}
.product {
  margin-bottom: 80px;
}
</style>
